<template>
  <el-card class="card_box card_header_top">
    <template #header>
      <div class="card_header">
        <span class="card_title">数据概览</span>
      </div>
    </template>
    <el-form ref="formRef" :model="form.data" inline>
      <el-row justify="space-between">
        <el-col :span="30">
          <el-form-item label="支付时间" prop="date">
            <el-date-picker
                v-model="form.data.date"
                type="daterange"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                @change="changeTime"
                clearable
                :editable="false"
                :class="form.data.date.length ? 'date_prefix_show':'date_prefix_close'"
                style="width: 255px !important;"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-select v-model="form.data.typeOfOrder" placeholder="请选择">
              <el-option v-for="item in typeOfOrderList.data" :key="item.key" :label="item.value"
                         :value="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="initialize()">查询</el-button>
            <el-button icon="Refresh" @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!-- 表格主体 -->
  <el-card>
    <template #header>
      <div class="card_header">
        <span class="card_title">列表展示</span>
      </div>
    </template>
    <div class="global_table_wrapper">
      <!--      个人-->
      <el-table
          v-show="visible"
          :data="dataList.data"
          highlight-current-row
          stripe
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center', background: '#f8f8f9' }"
          border
          max-height="500"
      >
        <el-table-column type="index" label="序号" min-width="70"/>
        <el-table-column prop="rentalOrderNo" label="租赁单号" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column prop="paymentOrderNo" label="支付单号" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column prop="singlePackageRental" label="单个套餐租金" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column label="套餐购买数量" min-width="280" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ `${row.packagesPurchasedNum} 个` }}
          </template>
        </el-table-column>
        <el-table-column prop="leaseGrossRent" label="租赁总租金" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column prop="depositHasBeenRefunded" label="已退押金" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column label="支付方式" min-width="280" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ paymentMethodsReturn(row.paymentMethods) }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" min-width="280" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ statusReturn(row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="代扣" min-width="280" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ withholdReturn(row.withholding) }}
          </template>
        </el-table-column>
        <el-table-column label="" min-width="280" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ row.withholding }}
          </template>
        </el-table-column>
        <el-table-column prop="region" label="区域" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column prop="paymentTime" label="支付时间" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column fixed="right" label="操作" min-width="250">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="rentRefund(scope.row)">
              退租金
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      企业-->
      <el-table
          v-show="!visible"
          :data="dataList.data"
          highlight-current-row
          stripe
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center', background: '#f8f8f9' }"
          border
          max-height="500"
      >
        <el-table-column type="index" label="序号" min-width="70"/>
        <el-table-column prop="rentalOrderNo" label="订单号" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column label="订单状态" min-width="280" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ statusReturn(row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="assignThePersonID" label="分配人员ID" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column prop="level2" label="二级" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column label="企业名称" min-width="280" :show-overflow-tooltip="true">
          <template #default="{row}">
            <el-link type="primary" @click="handleJump(row)">{{
                row.theNameOfTheBusiness
              }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="allocateTime" label="分配时间" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column prop="allocateTheNumberOfDays" label="分配天数" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column prop="allocationOfPeople" label="分配人数" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column prop="returnDays" label="返还天数" min-width="280" :show-overflow-tooltip="true"/>
        <el-table-column prop="numberOfPeopleToBeReturned" label="返还人数" min-width="280"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="操作原因" min-width="280" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ reasonForReturn(row.operationalReasons) }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <Pagination
            :total="form.data.total"
            v-model:page="form.data.pageNo"
            v-model:limit="form.data.pageSize"
            @pagination="paginationQuery"
        />
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import {useCounterStore} from "@/store/counter";
import dayjs from "dayjs";
import Pagination from "@/components/Pagination/index.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";

const route = useRoute();
const store = useCounterStore();
store.setTabsTitle(`${route.meta.title}-${route.params.id}`);

const formRef = ref();
let visible = ref(true)
let form = reactive<{ data: Record<string, any> }>({
  data: {
    id: '',
    date: [],
    startTime: '',
    endTime: '',
    typeOfOrder: '个人',
    pageNo: 1,
    pageSize: 10,
    total: 0
  }
});
const typeOfOrderList = reactive<{ data: Record<string, any> }>({
  data: []
});
const dataList = reactive<{ data: Record<string, any> }>({
  data: []
});
const changeTime = (e: any) => {
  if (e && e.length > 0) {
    form.data.startTime = dayjs(e[0]).format("YYYY-MM-DD 00:00:00");
    form.data.endTime = dayjs(e[1]).format("YYYY-MM-DD 23:59:59");
  } else {
    form.data.startTime = "";
    form.data.endTime = "";
  }
};

//退租金
const rentRefund = (row: Record<string, any>) => {
// router.push({path:'',query:{}})
}
const paymentMethodsReturn = (type: string | number) => {
  const mapType: Record<string, string> = {
    1: '微信',
    2: '支付宝',
    3: '网银支付',
    4: '转账',
    5: '数字人民币',
  }
  if (mapType[type]) return mapType[type]
}
const statusReturn = (type: string | number) => {
  const mapType: Record<string, string> = {
    1: '未领取',
    2: '使用中',
    3: '逾期',
    4: '冻结',
    5: '已付押金',
    6: '未付租金',
    7: '自动扣费失败',
    8: '结束',
  }
  if (mapType[type]) return mapType[type]
}
const withholdReturn = (type: string | number) => {
  const mapType: Record<string, string> = {
    1: '自动续费',
    2: '正常缴费',
  }
  if (mapType[type]) return mapType[type]
}
const reasonForReturn = (type: string | number) => {
  const mapType: Record<string, string> = {
    1: '给骑手续费',
  }
  if (mapType[type]) return mapType[type]
}
const handleJump = (row: Record<string, any>) => {
  // router.push({path:'',query:{}})
}
const handleVisible = () => {
  if (form.data.typeOfOrder == 1) {
    visible.value = true
  } else {
    visible.value = false
  }
}
const queryDropDownBox = async () => {
  const resp = await baseRequest.post('/userOrder/enums') as any
  typeOfOrderList.data = resp.data['订单类型']
}
const initialize = async () => {
  resetPagination()
  const formData = JSON.parse(JSON.stringify(form.data))
  console.log(formData);
  // const resp = await baseRequest.get('/userOrder/dataOverview', formData) as any
  // dataList.data = resp.data.list
  // form.data.total = resp.data.total
  handleVisible()
  if (form.data.typeOfOrder == 1) {
    dataList.data = [
      {
        id: 1,
        rentalOrderNo: 'ASDASDASDKJOXLZJCILXZJCIZXJ',
        paymentOrderNo: 'AJSIDJASKJDKASLJDLAKASAS',
        singlePackageRental: 50,
        packagesPurchasedNum: 50,
        leaseGrossRent: 5000,
        depositHasBeenRefunded: 50000,
        paymentMethods: 1,
        status: 1,
        withholding: 1,
        region: '上海市-宝山区',
        paymentTime: '2022-06-12 00:00:00',
      },
      {
        id: 2,
        rentalOrderNo: 'ASDASDASDKJOXLZJCILXZJCIZXJ',
        paymentOrderNo: 'AJSIDJASKJDKASLJDLAKASAS',
        singlePackageRental: 50,
        packagesPurchasedNum: 50,
        leaseGrossRent: 5000,
        depositHasBeenRefunded: 50000,
        paymentMethods: 2,
        status: 2,
        withholding: 2,
        region: '上海市-宝山区',
        paymentTime: '2022-06-12 00:00:00',
      },
    ] as any;
    form.data.total = 50;
  } else {
    dataList.data = [
      {
        id: 1,
        rentalOrderNo: 'ASDASDASDKJOXLZJCILXZJCIZXJ',
        status: 1,
        assignThePersonID: 98652,
        level2: '上海骑顺',
        theNameOfTheBusiness: '上海骑顺科技发展有限公司',
        allocateTime: '2022-06-12 00:00:00',
        allocateTheNumberOfDays: 50,
        allocationOfPeople: 10002,
        returnDays: 10002,
        numberOfPeopleToBeReturned: 10002,
        operationalReasons: 1,
      },
      {
        id: 2,
        rentalOrderNo: 'ASDASDASDKJOXLZJCILXZJCIZXJ',
        status: 1,
        assignThePersonID: 98652,
        level2: '上海骑顺',
        theNameOfTheBusiness: '上海骑顺科技发展有限公司',
        allocateTime: '2022-06-12 00:00:00',
        allocateTheNumberOfDays: 50,
        allocationOfPeople: 10002,
        returnDays: 10002,
        numberOfPeopleToBeReturned: 10002,
        operationalReasons: 1,
      },
    ] as any;
    form.data.total = 50;
  }
};
const paginationQuery = async () => {
  const formData = unref(form.data);
  delete formData.date;
  console.log(formData);
  // const resp = await baseRequest.get('/userOrder/dataOverview', formData) as any
  // dataList.data = resp.data.list
  // form.data.total = resp.data.total
  handleVisible()
}
const resetPagination = () => {
  form.data.pageNo = 1
  form.data.pageSize = 10
  form.data.total = 0
}
const reset = () => {
  form.data = {
    id: route.query.id,
    date: [],
    startTime: "",
    endTime: "",
    typeOfOrder: '个人',
    pageNo: 1,
    pageSize: 10,
    total: 0
  };
  defaultParameter()
  initialize();
};
const defaultParameter = () => {
  const {id, type} = route.query
  if (type && type == '个人用户') {
    form.data.id = id
    form.data.typeOfOrder = '企业'
  } else if (type && type == '企业用户') {
    form.data.id = id
    form.data.typeOfOrder = 2
  } else {
    form.data.id = id
    form.data.typeOfOrder = '个人'
  }
}
onMounted(() => {
  queryDropDownBox()
  defaultParameter()
  initialize();
});
</script>
<style lang="scss" scoped>
.card_title {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}

:deep(.date_prefix_show .el-range__icon) {
  display: none !important;
  position: absolute !important;
  right: 15px !important;
  color: #333333 !important;
}

:deep(.date_prefix_close .el-range__icon) {
  position: absolute !important;
  right: 15px !important;
  color: #333333 !important;
}
</style>
